<template>
   <div class="reset">
      <div class="title">
            重置密码
      </div>
      <div class="content">
         <div class="inputbox">
            <div class="item" style="margin:0">
               <span class="pre" lang="zh">旧密码</span>
               <el-input class="input" v-model="oldPsd" placeholder="旧密码" clearable  />
            </div>
            <div class="item">
               <span class="pre" lang="zh">新密码</span>
               <el-input class="input" v-model="newPsd1" placeholder="新密码" type="password" show-password />
            </div>
            <div class="item">
               <span class="pre" lang="zh">确认密码</span>
               <el-input class="input" v-model="newPsd2" placeholder="确认密码" type="password" show-password />
            </div>
         </div>
         <el-button style="position: absolute ;bottom: 50px;left: 43px;background-color: rgb(41,132,248);" type="primary" size="large" @click="save">保存</el-button>
      </div>
   </div>
</template>

<script lang='ts'>
import { defineComponent,reactive, toRefs,} from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage  } from 'element-plus'
import { useStore } from 'vuex';

export default defineComponent({
   name: 'ResetPsd',
   setup() {
   const router = useRouter();
   const store = useStore()
   const state = reactive({
      oldPsd:"",
      newPsd1:"",
      newPsd2:""
   })
   // console.log(state.oldPsd);
   const funcList = {
       save:()=>{
         if(state.oldPsd !== store.state.userInfo.password){
            ElMessage({
                  message: '密码错误！',
                  type: 'error',
            })
         }else if(!state.newPsd1 || !state.newPsd2){
            ElMessage({
                  message: '请输入要修改的密码',
                  type: 'info',
            })
         }else if(state.newPsd1 === state.newPsd2){
            store.state.userInfo.password = state.newPsd1
            localStorage.setItem('userInfo',JSON.stringify({account:store.state.userInfo.account,password:""}))
            ElMessage({
                  message: '保存成功，请重新登录',
                  type: 'success',
            })
            // router.push('/home/worktabe')
            setTimeout(() => {
               router.push('/')
            }, 1000);
         }else{
            ElMessage({
                  message: '新旧密码必须相同',
                  type: 'warning',
            })
         } 
      }
   }
   return {
   ...toRefs(state),
    ...funcList
   }
 },
})
</script>

<style scoped lang='less'>
.reset{
    background-color: #fff;
    padding: 20px;
    .title{
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);
        text-align: left;
        position: relative;
        width: 200px;
        margin-left: 20px;
        border-bottom: 1px solid gray;
        &::before{
            content: '';
            display: block;
            background-color: rgb(41,132,248);
            position: absolute;
            top: 0;
            left: -16px;
            bottom: 0;
            right: 208px;
            border-radius: 3px;
        }
    }
    .content{
      height: 500px;
      position: relative;
      border-top: 1px solid #eee;
      margin-top: 5px;
      font-size: 13px;
      .inputbox{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         .item{
            // width: 33%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 40px;
            .pre{  
               color: #999;
               margin-right: 15px;
               width: 55px;
               text-align-last: justify;
               text-align: justify;
            }
            .input{
               width: 500px;
               height: 50px;
            }
         }
      }
    }
}
</style> 